<!Doctype html>
<html>
    <head>
        <meta Charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>GoMoKu</title>
        <link rel="stylesheet" href="../css/bootstrap.min.css"/>
        <link rel="stylesheet" href="../css/toastr.css"/>
        <style>
            #chess {
                display: block;
                margin: 50px auto;
                box-shadow: -2px -2px 2px #efefef , 5px 5px 5px #b9b9b9;
            }
            #chess:hover{
                cursor: pointer;
            }
            .row {
                height: 10%;
                margin: 0 auto;
                width: 30%;
                position: relative;
            }
        </style>
        <script>
            window.onload = function() {

            } ;
        </script>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div id = "yourturn" class="col-lg-2" style="width: 260px;height: 75px;background-color:lightskyblue;border-radius: 2%;visibility: hidden;">
                    <font size="8" style="color:slategrey;">
                        <b>Your Turn</b>
                    </font>
                </div>
                <div id = "matching" class="col-lg-2" style="width: 240px;height: 40px;background-color:lavender;border-radius: 5%;visibility: visible;border-style:groove;">
                    <font size="5" style="color:gray;text-align: center;vertical-align: middle;">
                        <b id = "matchingContent">正在匹配对手……</b>
                    </font>
                </div>
            </div>
        </div>
        <!-- 棋盘 -->
        <div align="center">
            <canvas id="chess" width="550px" height="550px"></canvas>
        </div>

    </body>
    <script>
        var turn = false;
    </script>
    <script type="text/javascript" src="../js/toastr.min.js">
        toastr.options.positionClass = 'toast-bottom-right';
    </script>
    <script type="text/javascript" src="../js/chess.js"></script>
    <!-- <script type="text/javascript" src="../js/websocket.js"></script> -->
</html>